<template>
  <div class="home">
    <h2>store基本使用</h2>
    <h1>home当前计数: {{ $store.state.counter }}</h1>
    <button @click="increment">+1</button>
    <h1>computeAPI: home当前计数: {{ storeCounter }}</h1>
    <h1>setCounter当前计数: {{ setCounter }}</h1>
  </div>
</template>

<!--optionAPI-->
<script>
  export default {
    computed: {
      storeCounter() {
        return this.$store.state.counter
      }
    }
  }
</script>

<script setup>
  import { useStore } from 'vuex'
  import { toRefs } from 'vue'
  const store = useStore()

  const setCounter = store.state.counter // 非响应式
  const { counter } = toRefs(store.state) // 响应式
  
  // console.log(counter.value)
  // store.state.counter++
  // console.log(store.state.counter++)
  function increment() {
    store.commit('increment')
    // store.state.counter++ // 不推荐,因为这样没有经过mutation,无法触发watch,无法触发插件
    console.log(store.state.counter)
  }
</script>

<style scoped>
</style>